import React, { Component } from 'react'
import { Divider, Input, Button, Modal, Table, Popconfirm, Tag } from 'antd'
import { connect } from 'dva'

@connect(({ smsImport, loading }) => ({ 
    isShow: smsImport.isShow,
    smsList: smsImport.smsList,
    fetchSendSmsLoading: loading.effects['smsImport/fetchSendSms'],
    isGroupShow: smsImport.isGroupShow,
    smsGroup: smsImport.smsGroup,
    fetchSendGroupSmsLoading: loading.effects['smsImport/fetchSendGroupSms'],
    
}))
export default class ImportView extends Component {

    columns = [{
        title: '电话号',
        dataIndex: 'telNum',
        key: 'telNum',
        width: '100'
    },{
        title: '短信内容',
        dataIndex: 'smsText',
        width: '200',
        key: 'smsText',
    }];

    handleOk = ()=>{
        const { dispatch, smsList } = this.props
        dispatch({
            type: 'smsImport/fetchSendSms',
            payload: {
                list: smsList
            }
        })
    }

    handleCancel = ()=>{
        const { dispatch } = this.props
        dispatch({
            type: 'smsImport/setShow',
            payload: {
              list: [],
              isShow: false
            }
        })
    }

    groupHandleOk = ()=>{
        const { dispatch, smsGroup } = this.props
        dispatch({
            type: 'smsImport/fetchSendGroupSms',
            payload: smsGroup
        })
    }

    groupHandleCancel = ()=>{
        const { dispatch } = this.props
        dispatch({
            type: 'smsImport/setGroupShow',
            payload: {
                smsGroup: {},
                isGroupShow: false
            }
        })
    }

    render() {
        const { smsList, isShow, fetchSendSmsLoading,
            smsGroup, isGroupShow, fetchSendGroupSmsLoading } = this.props
            let telNumList = []
            if(smsGroup.telNumList){
                telNumList = smsGroup.telNumList
            }
        return (
            <div>
                <Modal
                    width={"800px"}
                    title="短信点对点导入"
                    visible={isShow}
                    onOk={this.handleOk}
                    onCancel={this.handleCancel}
                    confirmLoading={fetchSendSmsLoading}
                    okText="发送"
                    cancelText="取消"
                    >
                    <Table 
                        style={{ width:"100%" }}
                        columns={this.columns} 
                        dataSource={smsList} 
                        pagination = {{
                            simple:true
                        }}
                    />
                </Modal>
                <Modal
                    width={"800px"}
                    title="短信群发导入"
                    visible={isGroupShow}
                    onOk={this.groupHandleOk}
                    onCancel={this.groupHandleCancel}
                    confirmLoading={fetchSendGroupSmsLoading}
                    okText="发送"
                    cancelText="取消"
                    >
                    <p>短信主题:</p>
                    <p>{smsGroup.theme}</p>
                    <p>短信内容:</p>
                    <p>{smsGroup.smsText}</p>
                    <p>电话号:</p>
                    <div>
                        {
                            telNumList.map((item) => <Tag>{item}</Tag>)
                        }
                    </div>
                </Modal>
            </div>
        )
    }
}
